import styled from 'styled-components';
import { BorderColor, BorderRadius, Ellipsis, HeaderHeight, Scrollbar } from '../../style-config';
import iconfont from '../../assets/iconfont.ttf';

export const ChatContainerStyle = styled.div`
	flex: 1;
	display: flex;
	flex-direction: column;
	.empty {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		.empty_icon {
			font-size: 80px;
			color: #e5e5e5;
		}
	}
	.header {
		height: ${HeaderHeight}px;
		line-height: ${HeaderHeight}px;
		padding: 0 18px;
		border-bottom: 1px solid ${BorderColor};
		background: #f3f3f3;
		display: flex;
		justify-content: space-between;
		.title {
			flex: 1;
			font-size: 16px;
		}
	}
	.records {
		height: calc(100% - 210px);
	}
	.input {
		min-height: 150px;
		border-top: 1px solid ${BorderColor};
		background: #f3f3f3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.toolbar {
			height: 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;

			@font-face {
				font-family: 'iconfont';
				src: ${() => `url(${iconfont})`} format('truetype');
			}
			.iconfont {
				font-family: 'iconfont' !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			.base_icon {
				display: flex;
				align-items: center;
				column-gap: 20px;
				.iconfont {
					font-size: 20px;
					cursor: pointer;
				}
				.emoji {
					font-size: 18px;
				}
			}
		}
		.textarea {
			flex: 1;
			border: none;
			outline: none;
			background: transparent;
			resize: none;
		}
		.input_enter {
			margin: 12px;
			display: flex;
			justify-content: flex-end;
		}
	}
`;

export const ChatContentStyle = styled.div`
	height: 100%;
	overflow-y: auto;
	background: #f3f3f3;
	padding: 10px;
`;

export const EmojiListStyle = styled.div`
	width: 300px;
	height: 250px;
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	${Scrollbar}
	.emoji_item {
		display: inline-block;
		border-radius: 4px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 22px;
		cursor: default;
		&:hover {
			background: #efefef;
		}
	}
`;

export const ShowMessageStyle = styled.div`
	/* height: 50px; */
	/* border-bottom: 1px solid red; */
	margin-bottom: 16px;
	.chat_notice {
		width: 100%;
		color: #fff;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		span {
			color: #aaaaaa;
			line-height: 25px;
			font-size: 12px;
		}
	}
	.content {
		display: flex;
		.record_avatar {
			width: 35px;
			height: 35px;
		}
		/* 文本 */
		.content_text {
			font-size: 14px;
			display: block;
			position: relative;
			max-width: 300px;
			padding: 7px;
			word-wrap: break-word;
			white-space: pre-wrap;
			border-radius: 4px;
			flex-shrink: 0;
			min-height: 35px;
			align-self: flex-start;

			&::before {
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				border: 5px solid transparent;
				position: absolute;
				top: 12px;
			}
		}
		/* 图片 */
		.content_image {
			max-width: 140px;
			/* max-height: 140px; */
			border-radius: 4px;
			overflow: hidden;
		}
		/* 视频 */
		.content_video {
			width: 140px;
			height: 140px;
			border-radius: 4px;
			overflow: hidden;
			margin-left: 10px;
			display: flex;
			align-items: center;
			position: relative;
			.video {
				width: 100%;
				vertical-align: middle;
			}
			.video_play {
				width: 50px;
				height: 50px;
				position: absolute;
				top: 45px;
				left: 45px;
				cursor: pointer;
			}
		}
		/* 文件 */
		.content_file {
			width: 220px;
			height: 80px;
			padding: 8px;
			border-radius: 4px;
			overflow: hidden;
			display: flex;
			background: #fff;
			cursor: pointer;
			.file_info {
				width: 150px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.file_name {
					width: 150px;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; // 溢出内容隐藏
					text-overflow: ellipsis; // 文本溢出部分用省略号表示
					display: -webkit-box; // 特别显示模式
					line-clamp: 2;
					-webkit-line-clamp: 2; // 行数
					-webkit-box-orient: vertical; // 盒子中内容竖直排列
				}
				.file_size {
					font-size: 12px;
					color: #9e9e9e;
				}
			}
			.file_icon {
				width: 50px;
				height: 50px;
				flex-shrink: 0;
			}
		}
	}
	.self {
		justify-content: flex-end;
		.content_text {
			background: #b2e281;
			margin-right: 10px;

			&::before {
				border-left: 8px solid #b2e281;
				right: -12px;
			}
		}
		.content_image,
		.content_file,
		.content_video {
			margin-right: 10px;
		}
	}
	.other {
		justify-content: flex-start;
		.other_content {
			.other_name {
				font-size: 12px;
				margin-left: 10px;
				margin-bottom: 4px;
				color: #a1a1a1;
			}
		}
		.content_text {
			background: #ffffff;
			margin-left: 10px;

			&::before {
				border-right: 8px solid #ffffff;
				left: -12px;
			}
		}
		.content_image,
		.content_file,
		.content_video {
			margin-left: 10px;
		}
	}

	/* 系统消息 */
	.system_msg {
		width: 70%;
		margin: 0 auto;
	}
`;

// 群成员信息
export const MembersStyle = styled.div`
	width: 100%;
	.members_list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		.item_info {
			width: 50px;
			height: 50px;
			.item_avatar {
				display: block;
				margin: 0 auto;
			}
			.item_plus_del {
				width: 35px;
				height: 35px;
				line-height: 30px;
				margin: 0 auto;
				border: 1px dashed #7f7f7f;
				border-radius: ${BorderRadius}px;
				text-align: center;
				font-size: 16px;
				color: #7f7f7f;
				cursor: pointer;
			}
			.item_name {
				font-size: 12px;
				color: #7f7f7f;
				text-align: center;
				${Ellipsis}
			}
		}
	}
	.handle_group {
		text-align: center;
	}
`;

const SelectUserGlobal = styled.div<{
	is_del: boolean;
}>`
	width: 100%;
	height: 500px;
	.select_user {
		height: ${(props) => (props.is_del ? '100%' : 'calc(100% - 50px)')};
		display: flex;
		.left_select {
			width: 100%;
			min-width: 275px;
			height: 100%;
			.search_name {
				width: 100%;
				height: 40px;
			}
			.user_list {
				width: 100%;
				height: calc(100% - 40px);
				overflow: hidden auto;
				.user_item {
					width: 100%;
					height: 40px;
					padding: 0 10px;
					.item {
						display: flex;
						align-items: center;
					}
					.user_name {
						width: 170px;
						margin-left: 10px;
						${Ellipsis}
					}
				}
			}
		}
		.right_selected {
			width: 100%;
			height: 100%;
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			gap: 20px;
			overflow: hidden auto;
			border-left: 1px solid ${BorderColor};
			.item_info {
				position: relative;
				width: 60px;
				height: 60px;
				.item_avatar {
					display: block;
					margin: 0 auto;
				}
				.item_name {
					font-size: 12px;
					color: #7f7f7f;
					text-align: center;
					${Ellipsis}
				}
				.del_btn {
					width: 18px;
					height: 18px;
					line-height: 18px;
					text-align: center;
					background-color: #bfbfbf;
					color: #fff;
					font-size: 12px;
					border-radius: 50%;
					position: absolute;
					top: -10px;
					right: 0px;
					cursor: pointer;
				}
			}
		}
	}
`;

// 添加群成员
export const SelectUserStyle = styled(SelectUserGlobal)`
	${Scrollbar}
	.select_unit_dept {
		height: 50px;
		padding-top: 10px;
		display: flex;
		align-items: center;
	}
`;

// 移出群成员
export const DeleteUserStyle = styled(SelectUserGlobal)``;
